const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//公共的打包配置
module.exports = {
  entry: './src/main.js', // 指定webpack打包的入口文件
  output: {
    // 设置输出文件的位置，
    filename: 'js/bundle.js', // 设置输出文件名称
    path: path.join(__dirname, 'dist'), // 指定输出的文件所在的目录，这里测试下没有输出路径会怎样？
    publicPath: 'dist/',
  },
  module: {
    rules: [
      {
        test: /\.(vue|js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        // 预处理
        enforce: 'pre',
      },
      {
        test: /\.vue$/,
        //用于解析vue文件
        use: ['vue-loader'],
      },
      {
        test: /\.js$/,
        //刨除node_modules中的js代码
        exclude: /node_modules/,
        //对于js代码，我们需要使用babel-loader来进行代码的转换编译
        use: ['babel-loader'],
      },
      {
        test: /\.less$/,
        //对于less代码，我们需要使用less-loader来转换，然后再用css-loader 和 style-loader
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        //用来转换vue中的css文件,然后用style标签的方式引入css文件到界面上
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        //对于文件的复制
        loader: 'url-loader',
        //限制最大为10k 超过10K还是按文件存储，不会转换为base64
        options: {
          limit: 10 * 1024,
          //一定要加这个 不然src中会是一个object module
          esModule: false,
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};
